<template>
	<view >
		<nav-bar title="预约项目"></nav-bar>
		<scroll-view scroll-y style="width: 100%;">
		<ReservationHead :status="status" slotName="btn" isChecked="true">
			
		</ReservationHead>
		<view class="booking">
			<Booking ></Booking>
		</view>
		</scroll-view>
		<view class="btn_edit flexJcac">
			<view class="btn_cont" @click="nextTime">
				下一步
			</view>
		</view>
		<you-popup
			:popupVisible="popupVisible"
			popupTitle="确认结束活动？"
			@popupClose="popupVisible = false"
			@cancel="clickCancel"
			@confirm="clickConfirm"
			bgColor="#fff"
		>
			<view slot="popupContent">
				<!-- 标题 -->
				<view class="contain-text"> 您确定要结束该活动吗？结束后将无法再上传作品</view>
			</view>
			<view slot="btnBox" class="flexJcac">
				<view class="btn wdithBtn1" @click="sure">确认</view>
				<view class="btn wdithBtn" @click="popupVisible = false">取消</view>
			</view>
		</you-popup>
	</view>
</template>

<script>
	import ReservationHead from './components/reservationHead'
	import NavBar from '@/components/nav-bar/index.vue'
	import Booking from './components/booking.vue'
	import YouPopup from '@/components/you-popup/index.vue'
	export default {
		components:{ NavBar, ReservationHead, Booking, YouPopup },
		data(){
			return{
				mainHeight:'',
				popupVisible:false
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.mainHeight
		},
		methods:{
			nextTime(){
				this.popupVisible = true
			},
			sure(){
				this.popupVisible = false
			}
		}
		}
</script>

<style lang="scss" scoped>
	.booking{
		margin: 30rpx;
		border-radius: 17rpx;
	}
	.btn_edit{
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 148rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 13rpx  #ADADAD;
		.btn_cont{
			width: 671rpx;
			height: 94rpx;
			opacity: 1;
			border-radius: 63rpx;
			background: #C27E15;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 10rpx 10rpx 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			vertical-align: top;
		}
	}
	.wdithBtn{
		width:117rpx;
		height:49rpx;
		color: #C27E15;
	}
	.wdithBtn1{
		width:117rpx;
		height:49rpx;
		background: #C27E15;
		color: #fff;
	}
</style>